<template>
  <div class="login-page">
    <h2>登录</h2>
    <form @submit.prevent="onSubmit" class="login-form">
      <label>
        用户名
        <input v-model="username" type="text" placeholder="请输入用户名" />
      </label>
      <label>
        密码
        <input v-model="password" type="password" placeholder="请输入密码" />
      </label>
      <button type="submit">登录</button>
    </form>
  </div>
  </template>

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')

function onSubmit() {
  // 占位提交逻辑（仅用于页面占位），实际登录可对接后端认证接口
  if (!username.value || !password.value) {
    alert('请输入用户名和密码')
    return
  }
  alert(`登录请求：${username.value}`)
}
</script>

<style scoped>
.login-page { max-width: 360px; margin: 48px auto; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
input { width: 100%; padding: 8px; }
button { padding: 8px 12px; }
</style>